import React, { useState } from 'react';
import { history } from 'umi';
import { Row, Col, Steps, Typography, Form, Input, Radio, Button, RadioChangeEvent, Card, Dropdown, Menu } from 'antd';
import styles from './style.less';
import DebounceSelect from './components/DebounceSecect';
import { OptionsValue } from './data';
import { selectSearch } from './service';
import Rules from './mockData';
import DetailTable from './components/DetailTable';
import { DownOutlined } from '@ant-design/icons';
console.log(Rules)

const { Step } = Steps;
const { Title } = Typography;

function handleMenuClick(e: any) {
  console.log('click', e);
}

const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1">
      批量修改出价
    </Menu.Item>
    <Menu.Item key="2">
      批量修改匹配方式
    </Menu.Item>
    <Menu.Item key="3">
      批量修改P-URL
    </Menu.Item>
    <Menu.Item key="4">
      批量修改M-URL
    </Menu.Item>
    <Menu.Item key="5">
      批量删除
    </Menu.Item>
  </Menu>
)


export default function Detail() {
  const [planForm] = Form.useForm();
  const [basicForm] = Form.useForm();
  const [budgetBidForm] = Form.useForm();
  const [value, setValue] = useState<OptionsValue[]>([]);
  // const params = useLocation();
  console.log(history.location);
  // const name = history.location.state.name;
  // const [radioValue, setRadioValue] = useState(1);

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  // const onChange = (e: RadioChangeEvent) => {
  //   console.log('radio checked', e.target.value);
  //   setRadioValue(e.target.value);
  // };

  const handleCancel = () => {
    basicForm.resetFields();
    budgetBidForm.resetFields();
    history.goBack();
  }

  return (
    <Row className={styles.row}>
      <Col flex={1}>
        <Steps progressDot current={1} direction="vertical" className={styles.step}>
          <Step
            title="推广计划"
            description={
              <>
                <div>基础设置</div>
                <div>预算及出价</div>
              </>
            }
          />
          <Step
            title="推广单元"
            description={
              <>
                <div>单元设置</div>
                <div>关键词设置</div>
              </>
            }
          />
          <Step
            title="推广创意"
            description={
              <>
                <div>创意文案</div>
                <div>落地页信息</div>
              </>
            }
          />
        </Steps>
      </Col>
      <Col flex={22} style={{ maxWidth: '90%' }}>
        <div className={styles.container}>
          <Form.Provider>
            {/* 标题 */}
            <Title level={5}></Title>
            {/* 所属计划表单 */}
            <Form form={planForm} name="planForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }}>
              <Form.Item name='planName' label='计划名称' rules={Rules.planName} className={styles.formItem}>
                <DebounceSelect
                  mode="multiple"
                  value={value}
                  placeholder="请选择推广计划"
                  allowClear
                  className={styles.formItemContent}
                  fetchOptions={selectSearch}
                  onChange={newValue => {
                    setValue(newValue);
                  }}
                />
              </Form.Item>
              <Form.Item name='unitName' label='计划名称' rules={Rules.unitName} className={styles.formItem}>
                <DebounceSelect
                  mode="multiple"
                  value={value}
                  placeholder="请选择推广计划"
                  allowClear
                  className={styles.formItemContent}
                  fetchOptions={selectSearch}
                  onChange={newValue => {
                    setValue(newValue);
                  }}
                />
              </Form.Item>
            </Form>
            <Title level={5}>关键词设置</Title>
            <span>建议为一个单元添加多个关键词，关键词围绕单元推广主题扩展</span>
            {/* 预算及出价表单 */}
            <div className={styles.keyWordCard}>
              <Card className={styles.addCard}>
                <div>关键词搜索</div>
                <div>
                  <span>关键词</span>
                  <Input placeholder='请输入关键词' allowClear className={styles.formItemContent} />
                  <Button type='primary' className={styles.saveBtn}>查询</Button>
                </div>
                <DetailTable direction={'left'} />
              </Card>
              <Card>
                <div>关键词预览</div>
                <div>
                  <Dropdown overlay={menu}>
                    <Button type='primary' className={styles.saveBtn}>批量修改<DownOutlined /></Button>
                  </Dropdown>
                  <Button type='primary' className={styles.saveBtn}>清空选择</Button>
                  <Button type='primary' className={styles.saveBtn}>清空表格</Button>
                </div>
                <DetailTable direction={'right'} />
              </Card>
            </div>
          </Form.Provider>
          <div className={styles.btnGroup}>
            <Button type='primary' className={styles.saveBtn}>保存并添加创意</Button>
            <Button onClick={handleCancel}>取消</Button>
          </div>
        </div>
      </Col>
    </Row>
  );
}
